<template>
  <div>比较图片</div>
  <el-row :type="flex" :align="center">
    <div>
      <el-upload :before-upload="onUpload1">
        <el-button>上传图1</el-button>
      </el-upload>
    </div>
    <div>
      <el-upload :before-upload="onUpload2">
        <el-button>上传图2</el-button>
      </el-upload>
    </div>
    <div>
      <el-button @click="add">比较</el-button>
    </div>
  </el-row>
  <div>
    <el-row type="flex">
      <div class="file1" v-if="file1.src">
        <div>图1 {{ file1.imgData.width }} : {{ file1.imgData.height }}</div>
        <div>
          <img :src="file1.src" alt="" />
        </div>
      </div>
      <div class="file2" v-if="file2.src">
        <div>图2 {{ file2.imgData.width }} : {{ file2.imgData.height }}</div>
        <div>
          <img :src="file2.src" alt="" />
        </div>
      </div>
      <div class="diff" v-if="diff.src">
        <div>比较图 {{ diff.percent.mssim }}</div>
        <div>
          <img :src="diff.src" alt="" />
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import pixelmatch from 'pixelmatch'
import ssim from 'ssim.js'
export default {
  data() {
    return {
      file1: {},
      file2: {},
      diff: {}
    }
  },
  methods: {
    onUpload1(file) {
      this.upload(file).then((res) => {
        this.file1 = res
      })
      return false
    },
    onUpload2(file) {
      this.upload(file).then((res) => {
        this.file2 = res
      })
      return false
    },
    upload(file) {
      return new Promise((resolve) => {
        let fr = new FileReader()
        fr.onload = (e) => {
          var img = new Image()
          img.src = e.target.result
          img.onload = () => {
            var canvas = this.createCanvas(img.width, img.height)
            var ctx = canvas.getContext('2d')
            ctx.drawImage(img, 0, 0)
            let imgData = ctx.getImageData(0, 0, img.width, img.height)
            resolve({
              imgData,
              src: e.target.result
            })
          }
        }
        fr.readAsDataURL(file)
      })
    },
    createCanvas(width, height) {
      var canvas = document.createElement('canvas')
      canvas.width = width
      canvas.height = height
      return canvas
    },
    add() {
      if (this.file1.imgData && this.file2.imgData) {
        let { width: w1, height: h1 } = this.file1.imgData
        let { width: w2, height: h2 } = this.file2.imgData
        if (w1 == w2 && h1 == h2) {
          let { width, height } = this.file1.imgData
          var canvas = this.createCanvas(width, height)
          var ctx = canvas.getContext('2d')
          let diff = ctx.createImageData(width, height)
          pixelmatch(this.file1.imgData.data, this.file2.imgData.data, diff.data, width, height, { threshold: 0.1 })

          this.diff.percent = ssim(this.file1.imgData, this.file2.imgData)
          ctx.putImageData(diff, 0, 0)
          this.diff.src = canvas.toDataURL()
        } else {
          alert('图片尺寸不一致')
        }
      }
    }
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: url('@/images/p1.png') 0 0 / 100% 100% no-repeat;
}
img {
  max-width: 300px;
}
</style>
